<template>
	<div class="blogBox">
		<el-form :model="addArticle" :rules="rules" ref="addArticle" class="demo-ruleForm">
			<el-form-item label="标题" prop="title">
				<el-input v-model="addArticle.title" placeholder="标题"></el-input>
			</el-form-item>
			<el-form-item label="概要" prop="summary">
				<el-input v-model="addArticle.summary" placeholder="概要"></el-input>
			</el-form-item>
			<el-form-item label="文章标签">
				<el-select v-model="addArticle.type" placeholder="文章标签">
					<el-option label="Java" value="Java"></el-option>
					<el-option label="前端" value="前端"></el-option>
					<el-option label="SpringBoot" value="SpringBoot"></el-option>
					<el-option label="算法" value="算法"></el-option>
					<el-option label="求职" value="求职"></el-option>
					<el-option label="杂项" value="杂项"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<v-md-editor :disabled-menus="[]" @upload-image="handleUploadImage" @delete-image="deleteImage"
					style="width: 15rem;" v-model="addArticle.content" height="10rem"></v-md-editor>
			</el-form-item>
			<el-form-item>
				<el-button style="width:1rem" type="primary" @click="submitForm">发布</el-button>
				<el-button style="width:1rem">草稿</el-button>
				<el-button style="width:1rem" type="danger" @click="goback">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		postRequest,
		putRequest,
		getRequest,
		deleteRequest
	} from "../utils/api";
	import axios from 'axios' //引入axios
	export default {
		data() {
			return {
				addArticle: {
					id: "",
					title: "",
					summary: "",
					content: "",
					writer: "早睡蛋"
				},
				url: "",
				desc: "",
				selectTxt: "",
				rules: {
					title: [{
						required: true,
						message: "标题不能为空",
						trigger: "blur"
					}],
				},
			}
		},
		created() {
			const _this = this;
			_this.createID();
		},

		methods: {
			//生成id编号
			createID() {
				const _this = this;
				postRequest("/article/createId").then((res) => {
					if (res.data.code == 200) {
						_this.addArticle.id = res.data.data;
					} else {
						_this.$notify({
							title: "服务器错误",
							type: "warning",
						});
					}
				});
			},

			//添加文章
			submitForm() {
				const _this = this;
				_this.$refs.addArticle.validate((valid) => {
					if (valid) {
						postRequest("/article/addArticle", _this.addArticle).then((res) => {
							if (res.data.code == 200) {
								_this.$notify({
									title: res.data.message,
									type: "success",
								});
								_this.$router.replace("/mainhome");
							} else {
								_this.$notify({
									title: res.data.message,
									type: "error",
								});
							}
						});
					} else {
						_this.$message.error("格式错误，请检查");
						return false;
					}
				});
			},

			//重置
			resetForm(formName) {
				const _this = this;
				_this.$refs[formName].resetFields();
				_this.addArticle.title = "";
				_this.addArticle.summary = "";
				_this.addArticle.content = "";
			},

			//返回
			goback() {
				const _this = this;
				_this.$router.replace("/mainhome");
			},

			//上传图片方法
			handleUploadImage(event, insertImage, file) {
				const _this = this;
				// 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
				const formData = new FormData();
				formData.append("file", file[0]);
				formData.append("BId", _this.addArticle.id);
				axios({
					method: "post",
					url: "http://localhost:8785/api/article/uploadImage",
					data: formData,
					headers: {
						"content-type": "multipart/form-data",
					},
				}).then((res) => {
					// 此处只做示例
					insertImage({
						url: res.data.data.fileUrl,
						desc: res.data.data.desc,
						// width: 'auto',
						// height: 'auto',
					});
				})
			},

			//删除图片方法
			deleteImage(event, file) {

				console.log(file);
			},


		}
	}
</script>

<style>
	.blogBox {
		text-align: left;
		padding-left: 2rem;
		padding-right: 2rem;
		margin: 0.1rem auto;
		width: 100%;
		height: 90%;
		overflow-x: auto;
	}
</style>
